<template>
  <el-container>
    <div style="display: flex; width: 100%; height: 100vh">
      <div class="menu" style="width: 200px; text-align: center">
        <h3 class="title" style="margin: 20px 0">疫苗接种管理系统</h3>
        <el-menu
          default-active="/"
          text-color="#999"
          active-text-color="#0472c4"
          router
          title="疫苗接种管理系统"
        >
          <el-menu-item index="/" route="/">
            <el-icon><HomeFilled /></el-icon> <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/forumcenter" route="/forumcenter">
            <el-icon><Opportunity /></el-icon>
            <span>论坛中心</span>
          </el-menu-item>
          <!-- <el-menu-item index="/vaccinreservation" route="/vaccinreservation">
            <el-icon><Flag /></el-icon><span>疫苗预约</span>
          </el-menu-item> -->
          <el-menu-item index="/backhelp" route="/backhelp">
            <el-icon><Comment /></el-icon> <span>反馈帮助</span>
          </el-menu-item>
          <el-menu-item index="/userlogin" route="/userlogin">
            <el-icon><UserFilled /></el-icon>
            <span>个人中心</span>
          </el-menu-item>
        </el-menu>
      </div>
      <el-scrollbar height="100%" style="flex: 1">
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-scrollbar>
    </div>
  </el-container>
</template>
<script>
export default {
  name: 'index',
};
</script>
<style scoped>
.el-main {
  padding: 0;
  top: 0;
  left: 0;
  border: 0;
  min-height: 100vh;
  background-image: url(../../assets/banner.png);
}
.el-footer {
  padding: 0;
  width: 100%;
  position: relative;
  text-align: center;
  background-color: #b0c4de;
  font-size: 14px;
}
.el-footer a {
  color: rgb(3, 3, 3);
  text-decoration: none;
}
.nav {
  height: 68px;
  background-color: rgba(245, 247, 249, 0.6);
  line-height: 68px;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
}
.nav img {
  position: absolute;
  left: 10px;
}
.nav a {
  color: rgb(3, 3, 3);
  text-decoration: none;
  margin-right: 35px;
}
.nav a span {
  vertical-align: 2px;
  /* margin-left: 8px; */
}
.nav a:hover {
  color: #afeeee;
}

.nav a.router-link-exact-active {
  color: #87cefa;
}
.footer {
  text-align: center;
  padding: 10px 0;
  bottom: 0px;
  min-height: 40px;
  max-width: 100%;
  background-color: rgba(84, 92, 100, 0.6);
}
</style>
